<script type="text/javascript" language="javascript" charset="utf-8">
$(".menu-wrap li").removeClass("active-link");
$(".menu-wrap #statistic").addClass("active");
$("#statistic #info").addClass("active-link");
$("#statistic #service a").addClass("active-link");
</script>
<div class="common-tit">
  <h2>服务数据</h2>
  <span>数据统计 > 服务数据</span>
</div>
<div class="xdata-box">
  <h3>总计</h3>
  <ul>
    <li>
      <span>156</span>
      <em>销售业绩(人)</em>
    </li>
  </ul>
  <div id="saleCon"></div>
</div>
<div class="pdata-box clearfix">
  <h3>
    <span>服务顾问排行榜</span>
    <div class="pda-tit">
      <em class="pda-sel">业绩排行</em>
      <em>评价排行</em>
    </div>
  </h3>
  <div id="markRanking"></div>
</div>
<script src="/assets/js/echarts.common.min.js"></script>
<script src="/assets/js/common.js"></script>
<script>
// 导师课消
var myChart = echarts.init(document.getElementById('saleCon'));
var xAxisData = <%==  @student_spend_date_array %>;
var data1 = <%== @student_spend_in_day %>;

option = {
  legend: {
    data: ['销售业绩(元)'],
    align: 'left'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    silent: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  toolbox: {
    show : true,
  },
  dataZoom: [{
    startValue: xAxisData[0]
  }, {
    type: 'inside'
  }],
    series: [{
      name: '销售业绩(元)',
      type: 'bar',
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
};
myChart.setOption(option);
// 市场专员排行榜
var myChart1 = echarts.init(document.getElementById('markRanking'));
var service_name_arr = <%== @service_name_arr %>;
var service_students_arr = <%== @service_students_arr %>;
var remark_name_array = <%== @remark_name_arr %>;
var remark_students_array = <%== @remark_students_arr %>;
option1 = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '10%',
    right: '4%',
    top: '1%',
    containLabel: false
  },
  toolbox: {
    show : true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type : 'category',
    axisLabel:{
      interval:0,
      rotate:0,
      margin:2,
      textStyle:{
        color:"#222"
      }},
    data: service_name_arr
  },
  series: [
  {
    name: '本月',
    type: 'bar',
    data: service_students_arr
  }
  ]
};

myChart1.setOption(option1);

//  切换  业绩排行  评价排行
//假数据
var testObj = {
  "yj" : [{
    dataY: service_name_arr,
    dataX: service_students_arr
  }],
  "hf" : [{
    dataY: remark_name_array,
    dataX: remark_students_array
  }]
}
$(".pda-tit em").on("click", function() {
  if ($(this).index() == 0) {
    myChart1.setOption({
      yAxis: {
        data: testObj.yj[0].dataY
      },
      series: [{
        data: testObj.yj[0].dataX
      }]
    });
  } else {
    myChart1.setOption({
      yAxis: {
        data: testObj.hf[0].dataY
      },
      series: [{
        data: testObj.hf[0].dataX
      }]
    });
  }
  if (!$(this).hasClass("pda-sel")) {
    $(this).addClass("pda-sel").siblings().removeClass("pda-sel");
  };
})

</script>

